<template>
    <div class="img_clip">
        <canvas ref="canvas" ></canvas>
        <div class="buttom_content"  style="left: 10px" @click="commit_img('cancel')">
            取消
        </div>
        <div class="buttom_content"  style="left: 40%" @click="init">
            还原
        </div>
        <div class="buttom_content"  style="right:  10px " @click="commit_img" >
             确定
        </div>
    </div>
</template>

<script setup>
import {onMounted, reactive, ref, unref} from "vue";

const props = defineProps({
    imgInfo: {}
})
const emit = defineEmits(["clip_img"]);

const common = reactive({
    imgSrc:{},
    scale : window.devicePixelRatio || 1,
    ctx :undefined,
    cas:undefined,
    img: new Image(),
    clip_info:{
        width : "",
        angle_1: {x:0, y:0},
        angle_2: {x:0, y:0},
        angle_3: {x:0, y:0},
        angle_4: {x:0, y:0}
    },
    move_start:{},
    img_info: {
        angle_1: {x:0, y:0},
        angle_2: {x:0, y:0},
        angle_3: {x:0, y:0},
        angle_4: {x:0, y:0},
        width: 0,
        height:0
    },
    scale_info:{
        start: [{x:0,y :0}, {x:0,y :0}],
        end: [{x:0,y :0}, {x:0,y :0}]
    },
    true_width:window.screen.width,
    true_height :window.screen.height,
    base64:""
})
const canvas = ref(null)

const init = ()=>{

    init_canvas()
    init_clip()
    create_canvas()
    bindTouchEvents()
}

const init_canvas=() =>{
    let scale = common.scale
    common.imgSrc = props.imgInfo
    common.cas = unref(canvas)
    common.cas.style.height =  window.screen.height + "px",
    common.cas.style.width =  window.screen.width + "px",
    common.cas.height = Math.floor(window.screen.height * scale)
    common.cas.width = Math.floor(window.screen.width * scale)
    common.ctx = common.cas.getContext("2d");
    common.ctx.scale(scale,scale)
}
const init_clip = () => {
    common.clip_info.width =  common.true_width*0.70
    common.clip_info.angle_1.x  =   common.true_width*0.15
    common.clip_info.angle_1.y = (common.true_height - common.clip_info.width)/3
    common.clip_info.angle_2.x =    common.clip_info.width + common.clip_info.angle_1.x
    common.clip_info.angle_2.y = (common.true_height - common.clip_info.width)/3
    common.clip_info.angle_3.x = common.clip_info.width + common.clip_info.angle_1.x
    common.clip_info.angle_3.y = common.clip_info.width + common.clip_info.angle_1.y
    common.clip_info.angle_4.x = common.clip_info.angle_1.x
    common.clip_info.angle_4.y = common.clip_info.width + common.clip_info.angle_1.y

}

const  create_canvas = () =>{
    common.img.src =   URL.createObjectURL(common.imgSrc)
    clear_canvas()

    common.img.onload = ()=>{
        common.img_info.width = common.img.width
        common.img_info.height = common.img.height
        let rate = 1

        if(common.img_info.width >= common.img_info.height){

            rate =  common.clip_info.width/common.img_info.height
            common.img_info.angle_1.y = common.clip_info.angle_1.y
            common.img_info.height = common.img_info.height * rate
            common.img_info.width = common.img_info.width * rate
            common.img_info.angle_1.x = -(common.img_info.width - common.true_width)/2

        } else {
            rate =  common.clip_info.width/common.img_info.width
            common.img_info.angle_1.x = common.clip_info.angle_1.x
            common.img_info.height = common.img_info.height * rate
            common.img_info.width = common.img_info.width * rate
            common.img_info.angle_1.y = -(common.img_info.height - (common.true_height-common.clip_info.angle_1.y ))/2
        }
        init_img()
        common.ctx.drawImage(common.img, common.img_info.angle_1.x,  common.img_info.angle_1.y ,common.img_info.width, common.img_info.height)
        create_clip()
    }
}

const init_img = () =>{

    common.img_info.angle_2.x = common.img_info.angle_1.x + common.img_info.width
    common.img_info.angle_2.y = common.img_info.angle_1.y

    common.img_info.angle_3.x =  common.img_info.angle_2.x
    common.img_info.angle_3.y = common.img_info.angle_1.y + common.img_info.height

    common.img_info.angle_4.x =  common.img_info.angle_1.x
    common.img_info.angle_4.y = common.img_info.angle_1.y + common.img_info.height

}

const   clear_canvas = () => {
    common.ctx.clearRect(0, 0, common.cas.width, common.cas.height);
}

const create_clip =() =>{
    common.ctx.fillStyle = "rgba(0,0,0,0.6)";
    common.ctx.moveTo(0 ,0)
    common.ctx.lineTo(common.true_width, 0)
    common.ctx.lineTo(common.true_width, common.true_height)
    common.ctx.lineTo(0, common.true_height)
    common.ctx.closePath()

    common.ctx.moveTo(common.clip_info.angle_1.x ,common.clip_info.angle_1.y)
    common.ctx.lineTo(common.clip_info.angle_4.x ,common.clip_info.angle_4.y)
    common.ctx.lineTo(common.clip_info.angle_3.x ,common.clip_info.angle_3.y)
    common.ctx.lineTo(common.clip_info.angle_2.x ,common.clip_info.angle_2.y)
    common.ctx.closePath()
    common.ctx.fill()

    common.ctx.beginPath()
    common.ctx.strokeStyle = "white";
    common.ctx.lineCap = 'round'
    common.ctx.lineWidth = "1";
    common.ctx.strokeRect(common.clip_info.angle_1.x ,common.clip_info.angle_1.y,  common.clip_info.width,  common.clip_info.width);

    for (let i = 1; i < 3; i++ ){
        let w = common.clip_info.width*i/3

        common.ctx.beginPath()
        common.ctx.strokeStyle = "white";
        common.ctx.lineCap = 'round'
        common.ctx.lineWidth = "0.5";
        common.ctx.moveTo(common.clip_info.angle_1.x +  w ,  common.clip_info.angle_1.y)
        common.ctx.lineTo(common.clip_info.angle_1.x +  w  ,  common.clip_info.angle_4.y)
        common.ctx.stroke()

        common.ctx.beginPath()
        common.ctx.strokeStyle = "white";
        common.ctx.lineCap = 'round'
        common.ctx.lineWidth = "0.5";
        common.ctx.moveTo(common.clip_info.angle_1.x ,  common.clip_info.angle_1.y + w)
        common.ctx.lineTo(common.clip_info.angle_2.x ,  common.clip_info.angle_1.y + w)
        common.ctx.stroke()
    }

    for ( let key in common.clip_info){

        if(key == "width"){
            continue
        }

        let n = 1
        let point = common.clip_info.width /15
        let xx =common.clip_info[key].x - n
        let yy = common.clip_info[key].y - n

        let lenX = common.clip_info[key].x + point
        let lenY = common.clip_info[key].y + point

        if(common.clip_info[key].x  > common.clip_info.width){
            xx = common.clip_info[key].x + n
            lenX = common.clip_info[key].x - point

        }
        if(common.clip_info[key].y  > common.clip_info.width){
            yy = common.clip_info[key].y + n
            lenY = common.clip_info[key].y - point
        }

        common.ctx.beginPath()
        common.ctx.strokeStyle = "white";
        common.ctx.lineCap = 'square'
        common.ctx.lineWidth = "3";
        common.ctx.moveTo(xx , yy )
        common.ctx.lineTo( lenX, yy)
        common.ctx.moveTo( xx , yy )
        common.ctx.lineTo( xx , lenY)
        common.ctx.stroke()
    }
}

const bindTouchEvents =() => {
    common.cas.addEventListener("touchstart", handleTouchStart);
    common.cas.addEventListener("touchmove", handleTouchMove);
    common.cas.addEventListener("touchend", handleTouchEnd);
}

const handleTouchStart = (e)=>{
    if (e.touches.length == 1) {
        common.move_start = {"x":e.touches[0].screenX, "y" :e.touches[0].screenY}
    }

    if (e.touches.length == 2) {

        common.move_start = {
            "x": e.touches[0].screenX <= e.touches[1].screenX? e.touches[0].screenX : e.touches[1].screenX,
            "y" :e.touches[0].screenY <= e.touches[1].screenY? e.touches[0].screenY : e.touches[1].screenY
        }

        common.scale_info.start[0].x = e.touches[0].screenX
        common.scale_info.start[0].y = e.touches[0].screenY
        common.scale_info.start[1].x = e.touches[1].screenX
        common.scale_info.start[1].y = e.touches[1].screenY
    }
}

const handleTouchMove = (e)=>{
    e.preventDefault();
    if (e.touches.length == 1) {
        let move_x =  common.move_start.x - e.touches[0].screenX
        let move_y =  common.move_start.y - e.touches[0].screenY
        common.img_info.angle_1.x = common.img_info.angle_1.x - move_x
        common.img_info.angle_1.y = common.img_info.angle_1.y - move_y

        clear_canvas()
        common.ctx.drawImage(common.img, common.img_info.angle_1.x,  common.img_info.angle_1.y ,common.img_info.width, common.img_info.height)
        create_clip()
        common.move_start.x = e.touches[0].screenX
        common.move_start.y = e.touches[0].screenY
    }
    if (e.touches.length == 2) {
        let move_x =  common.move_start.x - (e.touches[0].screenX <= e.touches[1].screenX? e.touches[0].screenX : e.touches[1].screenX)
        let move_y =  common.move_start.y - (e.touches[0].screenY <= e.touches[1].screenY? e.touches[0].screenY : e.touches[1].screenY)
        common.img_info.angle_1.x = common.img_info.angle_1.x - move_x
        common.img_info.angle_1.y = common.img_info.angle_1.y - move_y

        common.scale_info.end[0].x = e.touches[0].screenX
        common.scale_info.end[0].y = e.touches[0].screenY
        common.scale_info.end[1].x = e.touches[1].screenX
        common.scale_info.end[1].y = e.touches[1].screenY

        let start_width = Math.abs( common.scale_info.start[0].x - common.scale_info.start[1].x)
        let end_width = Math.abs( common.scale_info.end[0].x - common.scale_info.end[1].x)
        let rate =  (end_width  + 100)/(start_width + 100 )
        common.img_info.width = common.img_info.width * rate
        common.img_info.height = common.img_info.height * rate
        clear_canvas()
        common.ctx.drawImage(common.img, common.img_info.angle_1.x ,  common.img_info.angle_1.y , common.img_info.width, common.img_info.height)
        create_clip()

        common.scale_info.start[0].x = e.touches[0].screenX
        common.scale_info.start[0].y = e.touches[0].screenY
        common.scale_info.start[1].x = e.touches[1].screenX
        common.scale_info.start[1].y = e.touches[1].screenY
        common.move_start.x = e.touches[0].screenX <= e.touches[1].screenX? e.touches[0].screenX : e.touches[1].screenX
        common.move_start.y = e.touches[0].screenY <= e.touches[1].screenY? e.touches[0].screenY : e.touches[1].screenY
    }
}
const handleTouchEnd = (e)=>{

    init_img()
    // common.ctx.rect(common.img_info.angle_1.x,common.img_info.angle_1.y,common.img_info.width,common.img_info.height);
    // let angle_1 = ! common.ctx.isPointInPath( common.clip_info.angle_1.x ,common.clip_info.angle_1.y)
    // let angle_2 =! common.ctx.isPointInPath( common.clip_info.angle_2.x ,common.clip_info.angle_2.y)
    // let angle_3 = !common.ctx.isPointInPath( common.clip_info.angle_3.x ,common.clip_info.angle_3.y)
    // let angle_4= !common.ctx.isPointInPath( common.clip_info.angle_4.x ,common.clip_info.angle_4.y)
    //
    //
    //
    // if( angle_1 && angle_2){
    //     clear_canvas()
    //     common.ctx.drawImage(common.img, common.img_info.angle_1.x,  common.clip_info.angle_1.y ,common.img_info.width, common.img_info.height)
    //     create_clip()
    // }
    //
}


const commit_img =  (val)=>{
    if (val == 'cancel'){
        emit("clip_img", val)
        return
    }


    clear_canvas()
    common.ctx.rect(common.clip_info.angle_1.x,common.clip_info.angle_1.y, common.clip_info.width,common.clip_info.width);
    common.ctx.clip()
    common.ctx.drawImage(common.img, common.img_info.angle_1.x ,  common.img_info.angle_1.y , common.img_info.width, common.img_info.height)
    let scale = common.scale
    let imgData = common.ctx.getImageData(common.clip_info.angle_1.x *scale, common.clip_info.angle_1.y *scale, common.clip_info.width*scale,  common.clip_info.width*scale)

    const canvas2 = document.createElement("canvas");
    canvas2.width = common.clip_info.width * scale
    canvas2.height = common.clip_info.width * scale
    const ctx2 = canvas2.getContext("2d");
    ctx2.scale(common.scale, common.scale)
    ctx2.putImageData(imgData, 0 ,0)

    common.base64 = canvas2.toDataURL("image/png")

    emit("clip_img", common.base64)
}


onMounted(() => {
        init()
})

</script>

<style scoped>
.img_clip{
    height: 100%;
    background-color: black;
    overflow: hidden;
    position: fixed;
    top: 0;
    z-index: 200;
}
.buttom_content{
    position: fixed; bottom: 0 ;color: white;
    opacity: 0.8;
    font-weight: 500;
    padding: 0 20px 20px;
}
</style>